{% extends "layout.html" %}
{% load static %}

{% block title %}
    Привет — {{ block.super }}
{% endblock %}

{% block content %}
    <div class="content intro">
        <form action="{% url "intro" %}" method="post" class="intro-form" enctype="multipart/form-data">
            <div class="form-title">Привет! 👋</div>

            <div class="block-description" style="max-width: 100%;">
                <p>
                    Добро пожаловать к нам в Клуб!
                </p>
                <p>
                    На входе у нас принято знакомиться. Открытые дружеские отношения и отсутствие оголтелых анонимусов — залог здорового и недушного коммьюнити.
                </p>

                <p>
                    Для начала <strong>прочитайте <a href="{% url "show_post" "docs" "about" %}">наши правила</a></strong> и <strong><a href="{{ settings.VALUES_GUIDE_URL }}">ценности</a></strong>. Потом налейте себе вина и заполните форму ниже.
                    Если вы тут впервые, можете пойти почитать открытые посты <a href="{{ settings.TELEGRAM_CLUB_CHANNEL_URL }}" rel="noreferrer" target="_blank">на канале</a> и вернуться сюда позднее.
                </p>

                <p>
                    <strong>Каждый профиль проходит ручную модерацию</strong>. Вот прямо живой и тёплый человек принимает решение.
                    Мы тут не за скорость, а за качество.
                </p>

                <p>
                    По умолчанию вся заполненная вами информация будет видна только членам Клуба. Не обязательно писать всё как в паспорте, главное &mdash; честно и искренне.
                </p>

                <p>
                    Если вам всё это не нужно или хотите сохранить приватность — это тоже нормально. Можете <a href="{% url "show_post" "docs" "contact" %}">написать нам</a> и мы вернем деньги.
                </p>
            </div>

            <div class="clearfix50"></div>

            {% csrf_token %}

            <div class="form-row">
                <label for="{{ form.slug.id_for_label }}" class="form-label">
                    {{ form.slug.label }}
                </label>
                {{ form.slug }}
                {% if form.slug.errors %}<span class="form-row-errors">{{ form.slug.errors }}</span>{% endif %}
                <span class="form-row-help">Используется как URL вашей странички, для входа и для реплаев.<br>Потому только латиница, циферки и чёрточки без пробелов.</span>
            </div>

            <div class="form-row">
                <label for="{{ form.full_name.id_for_label }}" class="form-label">
                    {{ form.full_name.label }}
                </label>
                {{ form.full_name }}
                {% if form.full_name.errors %}<span class="form-row-errors">{{ form.full_name.errors }}</span>{% endif %}
                <span class="form-row-help">
                    Реальное имя и фамилия, либо псевдоним, если вы более известны по нему. Только имя не подойдет.
                </span>
            </div>

            <div class="form-row">
                <label for="{{ form.email.id_for_label }}" class="form-label">
                    {{ form.email.label }}
                </label>
                {{ form.email }}
                {% if form.email.errors %}<span class="form-row-errors">{{ form.email.errors }}</span>{% endif %}
                <span class="form-row-help">Не будет виден никому, нужен для входа и оповещений</span>
            </div>

            <div class="form-row">
                <label for="{{ form.country.id_for_label }}" class="form-label">
                    {{ form.country.label }} и {{ form.city.label }}
                </label>
                {{ form.country }} {{ form.city }}
                {% if form.country.errors %}<span class="form-row-errors">{{ form.country.errors }}</span>{% endif %}
                {% if form.city.errors %}<span class="form-row-errors">{{ form.city.errors }}</span>{% endif %}
            </div>

            <div class="form-row">
                <label for="{{ form.bio.id_for_label }}" class="form-label">
                    {{ form.bio.label }}
                </label>
                {{ form.bio }}
                {% if form.bio.errors %}
                    <span class="form-row-errors">{{ form.bio.errors }}</span>
                {% endif %}
                <span class="form-row-help">
                    🔥 <strong>Очень важное поле, без контактов мы не пускаем.</strong> Укажите ссылки на ваш телеграм, блог, инстаграм, подкаст и другие соцсети, чтобы другие члены Клуба могли с вами как-то связаться (телефон и имейл не считаются). Формат свободный. По сути это и будет карточка вашего профиля.
                </span>
            </div>

            <div class="form-row">
                <label for="{{ form.avatar.id_for_label }}" class="form-label">
                    {{ form.avatar.label }}
                </label>
                {{ form.avatar }}
                {% if form.avatar.errors %}<span class="form-row-errors">{{ form.avatar.errors }}</span>{% endif %}
            </div>

            <div class="block-header">👨‍💻<br>Чем занимаетесь?</div>

            <div class="block-description">
                Расскажите кто вы. Не обязательно как в трудовой книжке, просто расскажите как вы себя сами называете.
            </div>

            <div class="clearfix50"></div>

            <div class="form-row">
                <label for="{{ form.position.id_for_label }}" class="form-label">
                    {{ form.position.label }}
                </label>
                {{ form.position }}
                {% if form.position.errors %}<span class="form-row-errors">{{ form.position.errors }}</span>{% endif %}
            </div>

            <div class="form-row">
                <label for="{{ form.company.id_for_label }}" class="form-label">
                    {{ form.company.label }}
                </label>
                {{ form.company }}
                {% if form.company.errors %}<span class="form-row-errors">{{ form.company.errors }}</span>{% endif %}
            </div>

            <div class="block-header">😎<br>Расскажите Клубу о себе</div>

            <div class="block-description">
                <p>
                    Теперь основная часть — написание #intro!
                </p>
                <p>
                    Расскажите в нескольких абзацах откуда вы, где работаете, чем увлекаетесь по жизни и о чем мечтаете.
                    Неформально — мы же знакомимся, а не проводим собеседование.
                    Представьте, что мы встретились в баре у камина, уютно сидим и хотим познакомиться друг с другом.
                </p>
                <p>
                    <strong>Ваше интро станет видно всем</strong> — оно попадёт на главную и будет вашим первым постом в Клубе.
                    Это помогает новичкам быстро влиться в коммьюнити и найти единомышленников.
                </p>
                <p>
                    Вот примеры хороших интро: <a href="https://vas3k.club/intro/vas3k/" target="_blank">Вастрик</a>, <a href="https://vas3k.club/intro/lena/" target="_blank">Лена</a>, <a href="https://vas3k.club/intro/Sciannadev/" target="_blank">Анна</a>.
                </p>
                <p>
                    А если пока сложно — вот чуть более подробное описание с примерами: <a href="https://vas3k.club/post/28726/" target="_blank">Как не надо писать интро</a>.
                </p>
            </div>

            <div class="form-row form-row-intro">
                {{ form.intro }}
                {% if form.intro.errors %}<span class="form-row-errors">{{ form.intro.errors }}</span>{% endif %}
                <input-length-counter
                    element="#{{ form.intro.id_for_label }}"
                    class="intro-form-counter"
                    :min-length="{{ form.intro.field.widget.attrs.minlength }}"
                />
            </div>

            <div class="block-description" style="text-align: left; padding-top: 0;">
                <p>
                    Писать о себе всегда сложно, потому вот вам подсказки:
                </p>
                <ul>
                    <li>Расскажите чем вы занимаетесь и где сейчас работаете?</li>
                    <li>Из какого вы города и как там оказались?</li>
                    <li>Расскажите о своих хобби и привычках? Что делаете в свободное время?</li>
                    <li>Что вы делаете на работе? Только правда, а не как в резюме</li>
                    <li>Почему вы захотели вступить в Клуб? Как нашли нас? Есть ли уже друзья в Клубе?</li>
                    <li>Куда бы вы поехали, если бы вам подарили полгода оплачиваемого отпуска?</li>
                    <li>О чем вы мечтаете? Какие планы на будущее?</li>
                    <li>Может у вас есть какие-то личные проекты?</li>
                </ul>
            </div>

            <div class="block-header">📫<br>Как вам удобнее следить за происходящим?</div>

            <div class="block-description">
                У всех нас мало времени. Клуб — не социальная сеть, которая хочет украсть максимум вашего внимания и времени.
                Мы сразу предлагаем выбрать удобный для вас способ оставаться в курсе новых постов и событий.
            </div>

            <div class="form-row">
                <div class="big-radio">
                    <div class="big-radio-item">
                        {{ form.email_digest_type.1.tag }}
                        <label for="{{ form.email_digest_type.1.id_for_label }}" class="big-radio-label">
                            <i class="fab fa-telegram"></i>
                            <span class="big-radio-title">Ежедневный дайджест</span>
                            <span class="big-radio-description">Хочу быть в гуще событий и вкатиться в движуху!</span>
                        </label>
                    </div>
                    <div class="big-radio-item">
                        {{ form.email_digest_type.2.tag }}
                        <label for="{{ form.email_digest_type.2.id_for_label }}" class="big-radio-label">
                            <i class="fas fa-envelope"></i>
                            <span class="big-radio-title">Клубный Журнал</span>
                            <span class="big-radio-description">Хочу получать подборки лучших постов и комментов за неделю, чтобы я не пропустить ничего важного</span>
                        </label>
                    </div>
                    <div class="big-radio-item">
                        {{ form.email_digest_type.0.tag }}
                        <label for="{{ form.email_digest_type.0.id_for_label }}" class="big-radio-label">
                            <i class="fas fa-skull-crossbones"></i>
                            <span class="big-radio-title">Никак</span>
                            <span class="big-radio-description">Ничего не хочу, я просто сбоку постою и забуду про Клуб через месяц</span>
                        </label>
                    </div>
                </div>
                {% if form.email_digest_type.errors %}<span class="form-row-errors">{{ form.email_digest_type.errors }}</span>{% endif %}
            </div>

           <div class="block-header">Еще способы быть в курсе 👇</div>

            <div class="clearfix20"></div>

            <div class="block network-block" id="main">
                <div class="network-channels">
                    <a href="{{ settings.TELEGRAM_CLUB_CHANNEL_URL }}" rel="noreferrer" target="_blank" class="network-channel">
                        <span class="avatar network-channel-image" style="background-image: url('https://i.vas3k.club/1ef8c7b8404af4c0d2d9fc71bacb3e25c2e5d2f944ced3263cbe155f55ca8b7f.jpg');"></span>
                        <span class="network-channel-name text-120">Телеграм-канал Клуба</span>
                        <span class="network-channel-description">Лучшие посты, отобранные руками</span>
                    </a>

                    <a href="{{ settings.TELEGRAM_BOT_URL }}" rel="noreferrer" target="_blank" class="network-channel">
                        <span class="avatar network-channel-image" style="background-image: url('https://i.vas3k.club/09159d03d577dc178a70fdefcc33584e04e0bbf37aada4c1c812fe1bd75f240f.jpg');"></span>
                        <span class="network-channel-name text-120">Бот Клуба</span>
                        <span class="network-channel-description">Основной способ получать уведомления</span>
                    </a>

                    <a href="{{ settings.TELEGRAM_CLUB_CHAT_URL }}" rel="noreferrer" target="_blank" class="network-channel">
                        <span class="avatar network-channel-image" style="background-image: url('https://i.vas3k.club/b8c8cc57c58470a1ea7633b53e5f8014a7d9ad638169c440a3cfc6ff6a89da59.jpg');"></span>
                        <span class="network-channel-name text-120">Вастрик.Бар</span>
                        <span class="network-channel-description">Главная флудилка Клуба, заходите когда весело</span>
                    </a>

                    <a href="https://twitter.com/vas3k_club" target="_blank" class="network-channel">
                        <span class="avatar network-channel-image" style="background-image: url('https://i.vas3k.club/9d12a3d9dd99fecbc9eb7b76174ed7bcc0328989103c80439aaeb725b3c68ee7.jpg');"></span>
                        <span class="network-channel-name text-120">Твиттер-фид</span>
                        <span class="network-channel-description">Бездушная машина постит ссылки на новые посты</span>
                    </a>
                </div>
            </div>

            <div class="clearfix50"></div>

            <div class="block-header">🤖<br>Познакомьтесь с ботом</div>

            <div class="block-description">
                <p>
                    На бота завязано много фич Клуба — он присылает ответы на комментарии, через него можно отвечать и получать статистику.
                    Лучше сразу его подключить, иначе потом забудете и пропустите всё важное.
                </p>

                <a href="{{ settings.TELEGRAM_BOT_URL }}?start={{ me.secret_hash }}" target="_blank" class="button button-blue">
                    🤝 Привязать бота 🤝
                </a>
            </div>

            <div class="clearfix100"></div>
            <div class="clearfix100"></div>

            <div class="form-row form-row-checkbox" style="padding-bottom: 0;">
                <label for="{{ form.privacy_policy_accepted.id_for_label }}" class="form-label">
                    {{ form.privacy_policy_accepted }}
                      &larr; я даю согласие на обработку моих персональных данных, использование куков и других вещей, без которых современный интернет вообще не будет работать
                </label>
                {% if form.privacy_policy_accepted.errors %}<span class="form-row-errors">{{ form.privacy_policy_accepted.errors }}</span>{% endif %}
            </div>

            <button type="submit" class="button button-red button-big">Отправить на ревью</button>
        </form>
    </div>
{% endblock %}
